<style type="text/css">
ul.line{height:30px;overflow:hidden;color:#fff;} 
ul.line li{height:30px;list-style:none;font-size:16px;color:#fff;}
</style>

<div class="row " style="margin-top:-15px;">
    <div class="col-lg-12 ">
        <div class="ibox">
            <div class="ibox-title ibox-title-allatatus">
                <div class="status-title">
                   <h3 id="overall_status_total"><@spring.message code='dashboard.clusterState'/></h3>
                </div>
                <div class="zoumadeng">
                   <span id="overall_status"></span>
<!--                 <div id="overall_status"></div> -->
                </div>
                
            </div>
        </div>
    </div>
</div>

<div class="row">
	<div class="col-lg-2">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5><@spring.message code='dashboard.monitorState'/></h5>
			</div>
			<div class="ibox-content">
				<ul>
					<li>
						<div class="row">
							<div class="col-xs-5" >
								<span class="label label-success ">OK</span>
							</div>
							<div class="col-xs-5" style="text-align: center">
								<span id="mon_ok">2/10</span>
							</div>
						</div
					</li>
					<li>
						<div class="row">
							<div class="col-xs-5">
								<span class="label label-warning">WARN</span>
							</div>
							<div class="col-xs-5" style="text-align: center">
								<span id="mon_warn">8/10</span>
							</div>
						</div>
					</li>
					<li>
						<div class="row">
							<div class="col-xs-5">
								<span class="label label-danger">ERR</span>
							</div>
							<div class="col-xs-5" style="text-align: center">
								<span id="mon_err">0/10</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="col-lg-3">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5><@spring.message code='dashboard.storageUtilization'/>&nbsp;&nbsp;</h5>
				<span id="utilization_info"></span>
			</div>
			<div class="ibox-content">
				<div id="utilization" style="max-width: 500px; height: 100px"></div>
			</div>

		</div>
	</div>
	<div class="col-lg-2">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5><@spring.message code='dashboard.virtualNodeState'/></h5>
			</div>
			<div class="ibox-content" style="text-align: center;">
				<div id="pg_status" style="max-width: 300px; height: 100px"></div>
			</div>
		</div>
	</div>
	<div class="col-lg-2">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5><@spring.message code='dashboard.diskState'/><!-- (<span id="osd_total"></span>) --></h5>
			</div>
			<div class="ibox-content">
				<div class="row" style="height: 100px">
					<div class="col-sm-12 m-b-xs tds-progress-ba">
						<ul>
							<li style="width: 16%; text-align: right;">UP:
							<li>
							<li style="width: 80%;">
								<div class="progress">
									<div class="progress-bar" role="progressbar" aria-valuenow="60"
										aria-valuemin="0" aria-valuemax="100"
										id="num_up_osds"></div>
								</div>
							<li>
						</ul>
					</div>
					<div class="row">
					</div>
					<div class="col-sm-12 tds-progress-ba">
						<ul>
							<li style="width: 16%; text-align: right;">IN:
							</li>
							<li style="width: 80%;">
								<div class="progress">
									<div class="progress-bar progress-bar-warning"
										role="progressbar" aria-valuenow="60" aria-valuemin="0"
										aria-valuemax="100" id="num_in_osds">
										</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-3">
		<div class="ibox float-e-margins">
		<div class="ibox-title">
				<h5><@spring.message code='dashboard.quantity'/></h5>
			</div>
			<div class="ibox-content no-padding" style="height: 136px">
				<ul>
					<li><@spring.message code='dashboard.clusterPoolQuantity'/><span class="badge badge-success tds-badge-w"
						id="poolCount"></span></li>
					<li><@spring.message code='dashboard.clientHostsQuantity'/><span class="badge badge-success tds-badge-w"
						id="clientCount"></span></li>
					<li><@spring.message code='dashboard.serverHostsQuantity'/><span class="badge badge-success tds-badge-w"
						id="serverCount"></span></li>
				</ul>
			</div>
		</div>
	</div>
	
</div>
<div class="row">
	<div class="col-lg-9">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5><@spring.message code='dashboard.performance'/></h5>
			</div>
			<div class="ibox-content">

				<div class="m-t-sm">
					<div class="row">
						<div class="col-md-4">
							<div>
								<div id="node_write"></div>
							</div>
						</div>
						<div class="col-md-4">
							<div>
								<div id="node_read"></div>
							</div>
						</div>
						<div class="col-md-4">
							<div>
								<div id="node_operations"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-3">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5><@spring.message code='dashboard.osdDetection'/></h5>
			</div>
			<div class="ibox-content">
				<div class="text-center">
					<div id="scatter"></div>
				</div>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript"
	src="${basePath}/js/dashboard/globalize.min.js"></script>
<script type="text/javascript"
	src="${basePath}/js/dashboard/dx.chartjs.js"></script>
<script type="text/javascript"
	src="${basePath}/js/dashboard/ceph.dash.js"></script>